<script setup>
import { inject, ref } from "vue";
import { goPage } from "../../../utils/newpage";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { inventoryApi, totalApi } from "@/services/cloudlibrary";
import { cate } from "@/services/index";
import { formatPrice } from "@/utils/formatPrice";

onLoad(() => {
  getList();
  getTotal();
  cateFun();
});

// 库存统计
const total = ref(0);
const getTotal = async () => {
  try {
    // 发送请求
    let res = await totalApi({ cates: cates.value });
    if (res.code === 200) {
      total.value = res.data.total;
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

const status = ref("more");
const form = ref({ page: 1, limit: 20 });
const cates = ref("");

// 我的库存商品
const inventoryData = ref([]);
const getList = async () => {
  form.value.keyword = keyword.value;
  form.value.cates = cates.value;
  try {
    status.value = "loading";
    // 发送请求
    let res = await inventoryApi(form.value);
    if (res.code === 200) {
      let arr = [];
      arr = res.data.list;
      inventoryData.value = inventoryData.value.concat(arr);
      if (res.data.list.length < form.value.limit) {
        status.value = "no-more";
      } else {
        status.value = "more";
      }
      form.value.page++;
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

//下拉触底
onReachBottom(() => {
  // 触发下拉触底时执行的操作
  getList();
});

const keyword = ref("");

const searchfun = () => {
  inventoryData.value = [];
  form.value.page = 1;
  form.value.keyword = keyword.value;
  getList();
};

const goTakefun = () => {
  uni.navigateTo({
    url: "/pages/cloudlibrary/takegood/index",
  });
};

const purchase = () => {
  uni.navigateTo({
    url: "/pages/cloudlibrary/replenishment/index",
  });
};
const productGift = () => {
  uni.navigateTo({
    url: "/pages/cloudlibrary/productGift/index",
  });
};

// 分类查询
const cateData = ref([]);
const cateFun = async () => {
  try {
    // 发送请求
    let res = await cate();
    cateData.value = res.data;
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
    cateData.value = "";
  }
};

const showPopup = ref(false);
const type_classIndex = ref("");
const closepopup = () => {
  showPopup.value = false;
  cates.value = "";
  type_classIndex.value = "";
  inventoryData.value = [];
  form.value.page = 1;
  form.value.keyword = keyword.value;
  getTotal();
  getList();
};
// 筛选确认
const popupSubmit = () => {
  showPopup.value = false;
  inventoryData.value = [];
  form.value.page = 1;
  form.value.keyword = keyword.value;
  getTotal();
  getList();
};
const close = () => {
  showPopup.value = false;
  // cates.value=""
  // type_classIndex.value=""
  // inventoryData.value = [];
  // form.value.page = 1;
  // form.value.keyword = keyword.value;
  // getTotal();
  // getList();
};
const selectClassType = (index) => {
  inventoryData.value = [];
  form.value.page = 1;
  type_classIndex.value = index;
  cates.value = index;
  getTotal();
  getList();
};

// 刷新
const refresh = () => {
  inventoryData.value = [];
  form.value.page = 1;
  form.value.keyword = keyword.value;
  getTotal();
  getList();
};
</script>

<template>
  <view class="content">
    <view class="content-top">
      <up-search
        placeholder="搜索商品"
        v-model="keyword"
        @search="searchfun"
        :showAction="false"
      ></up-search>
      <view class="search" @click="showPopup = true">
        <image
          src="@/pages/cloudlibrary/static/search.png"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="content-num">
      当前库存余:<text>{{ total }}</text>
      <!-- <text class="refresh" @click="refresh"
        ><up-icon name="reload" size="22"></up-icon
      ></text> -->
    </view>
    <view
      class="content-list"
      v-show="inventoryData && inventoryData.length > 0"
    >
      <view
        class="content-list-item"
        v-for="(item, index) in inventoryData && inventoryData"
        :key="index"
      >
        <view class="content-list-item-left">
          <image :src="item.product.image" mode="aspectFill" />
          <view class="content-list-item-dec">
            <view class="content-list-item-name">{{
              item.product.store_name
            }}</view>
            <view class="goods-dec">默认</view>
            <view class="content-list-item-price"
              >进￥{{ formatPrice(item.product.vip_price) }}</view
            >
          </view>
        </view>
        <view class="content-list-item-right"> 余{{ item.quantity }} </view>
      </view>
    </view>

    <view class="nodate-bt" v-if="inventoryData.length === 0">
      <image src="/static/nodate/nodate.png" mode="widthFix"></image>
    </view>

    <uni-load-more color="#c6c5c3" :status="status" />
  </view>

  <view class="foodr-bt">
    <view class="bt-sbuit" @click="purchase">采购库存</view>
    <view class="bt-sbuit" @click="goTakefun">库存提货</view>
    <view class="bt-sbuit" @click="productGift">商品赠送</view>
  </view>

  <!-- 筛选 -->
  <u-popup
    :show="showPopup"
    mode="bottom"
    round="10"
    @close="close"
    @open="open"
    closeable
  >
    <view class="popup-content">
      <view class="popup-content-title">筛选</view>
      <u-line></u-line>
      <view class="popup-content-dec">
        <view class="popup-content-card">
          <text>分类</text>
          <view class="popup-content-card-btn">
            <view v-for="(item, index) in cateData" :key="index">
              <u-button
                class="popup-button"
                @click="selectClassType(item.id)"
                :class="
                  type_classIndex === item.id ? 'popup-button-active' : ''
                "
              >
                {{ item.name }}
              </u-button>
            </view>
          </view>
        </view>
      </view>

      <view class="popup-content-box">
        <view class="popup-content-bt">
          <u-button
            class="popup-content-qx"
            text="取消"
            @click="closepopup"
          ></u-button>
          <u-button
            class="popup-content-cl"
            text="筛选"
            @click="popupSubmit"
          ></u-button>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
